<template>
	<view class="c-content">
		<view class="c-process">
			<view class="pro-info" @click="caseDetail()">
				<view class="info-title r-flex">
					<u-tag :text="caseInfo.status" shape="circle" size="mini" bgColor="#1C5AD2"
						borderColor="#1C5AD2"></u-tag>
					<view class="title">
						<text style="font-size: 16px;font-weight: bold;">{{caseInfo.caseType}}</text>
						<text style="padding-left: 6px;color: #b4b7bb;">
							{{caseInfo.createTime}}
						</text>
					</view>
					<u-icon name="arrow-right" color="#b4b7bb" size="18"></u-icon>
				</view>
				<view class="pay-l r-flex">
					<u-icon name="file-text" color="#b4b7bb" size="18"></u-icon>
					<text class="person">案由：{{caseInfo.cause}}</text>
				</view>
				<view class="pay-l r-flex">
					<u-icon name="file-text" color="#b4b7bb" size="18"></u-icon>
					<text class="person">程序：{{caseInfo.procedure}}</text>
				</view>
				<view class="pay-l r-flex">
					<u-icon name="file-text" color="#b4b7bb" size="18"></u-icon>
					<text class="person">案号：{{caseInfo.caseNum}}</text>
				</view>
			</view>
			<view class="pro-attribute">
				<u-scroll-list :indicator="false">
					<view class="scroll-list" style="flex-direction: row;">
						<view class="add-party" @tap="addParty()">
							添加当事人
						</view>
						<view class="attri-item" @click="editAttri(item.id)" v-for="item in partyList" :key="item.id">
							<view class="attri-info">{{item.attr}}</view>
							<view class="title c-flex">
								<text style="font-size: 14px;font-weight: bold;">{{item.name}}</text>
								<text style="color: #b4b7bb;">{{item.attr}}</text>
							</view>
							<view class="client c-flex" v-if="item.wtType=='委托方'">
								<text>委</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<view class="pro-add r-flex">
				<view class="add-view r-flex">
					<text style="padding-right: 4px;">全部记录</text>
					<u-icon name="arrow-down" size="16"></u-icon>
				</view>
				<u-button icon="plus" :plain="true" @click="addRecord()" iconColor="#b4b7bb" color="#bcbfcc"
					shape="circle" text="添加">
				</u-button>
			</view>
			<view class="c-item">
				<view class="item-info" v-for="item in recodeList" :key="item.id">
					<view class="item-sel r-flex">
						<u-checkbox-group>
							<u-checkbox @change="checked()" v-model="isChecked" size="16" activeColor="#bcbfcc">
							</u-checkbox>
						</u-checkbox-group>
						<view class="title" :class="isChecked == true?'isActive':''">
							{{item.name}}
						</view>
						<view class="recode-del" @click="recordDel(item.id)">
							删除
						</view>
					</view>
					<view class="c-info">
						<view class="dec" :class="isChecked == true?'isActive':''">{{item.detail}}</view>
						<view class="nature" :class="isChecked == true?'isActive':''">{{item.startTime}}</view>
					</view>
				</view>
				<empty v-if="isShow"></empty>
			</view>
			<u-modal :content="contentDel" :show="showDel" showCancelButton closeOnClickOverlay @confirm="confirmDel"
				@cancel="cancelDel" confirmColor="#FD7840">
			</u-modal>
			<view class="divide-line">
				<u-divider text="我是有底线的"></u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	import caseDetail from "../caseList/caseDetail.js"
	import {
		getComRequest,
		deleteRequest
	} from '@/utils/request'
	import Empty from "@/components/empty/empty.vue"
	export default {
		mixins: [caseDetail],
		components: {
			Empty
		},
		data() {
			return {
				isChecked: false,
				// 删除
				showDel: false,
				contentDel: "此操作将删除该条记录，确认删除？",
				recodeList: [],
				recordId: "",
				partyList: []
			}
		},
		// 监听页面显示，刷新页面数据
		onShow() {
			this.caseRecode();
			this.partyDetail();
		},
		mounted() {
			this.caseRecode();
			this.partyDetail();
		},
		computed: {
			// 是否显示缺省页
			isShow() {
				return this.recodeList.length == 0;
			}
		},
		methods: {
			// 获取记录数据
			partyDetail() {
				const that = this;
				const url = "/api/participant" + "?caseId=" + this.caseId;
				getComRequest(url, {}).then((res) => {
					if (res.code == 200) {
						this.partyList = res.data;
						// // 当新增案件是当事人信息替换当事人记录表的信息
						// if(this.partyList.length == 1) {
						// 	this.$set(this.partyList[0],"name",this.caseInfo.name);
						// 	this.$set(this.partyList[0],"wtType",this.caseInfo.wtType);
						// }
					} else {
						return this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {})
			},
			// 跳转详情页
			caseDetail() {
				uni.navigateTo({
					url: "/pages/caseList/caseDetail" + "?id=" + this.caseId
				})
			},
			editAttri(e) {
				uni.navigateTo({
					url: "/pages/caseList/party/partyDetail" + "?id=" + e
				})
			},
			// 获取记录数据
			caseRecode() {
				const that = this;
				const url = "/api/record/" + "?caseId=" + this.caseId;
				getComRequest(url, {}).then((res) => {
					if (res.code == 200) {
						this.recodeList = res.data;
					} else {
						return this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {})
			},
			// 添加记录
			addRecord() {
				uni.navigateTo({
					url: "/pages/caseList/addRecord" + "?id=" + this.caseId
				})
			},
			// 删除记录
			recordDel(e) {
				const that = this;
				this.showDel = true;
				this.recordId = e;
			},
			confirmDel() {
				const that = this;
				// 替换为你的API请求路径
				const url = "/api/record/delete/" + this.recordId;
				deleteRequest(url, {}).then((res) => {
						if (res.code == 200) {
							this.showDel = false;
							this.caseRecode();
						} else {
							this.$refs.uToast.show({
								message: res.message,
								type: 'err',
							})
						}
					})
					.catch((err) => {});
			},
			cancelDel() {
				this.showDel = false;
			},
			// 是否选中
			checked() {
				this.isChecked = !this.isChecked;
			},
			addParty() {
				uni.navigateTo({
					url: "/pages/caseList/party/addParty" + "?id=" + this.caseId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-process {
		width: 100%;
		padding: 0 24rpx;
	}

	.pro-info {
		padding: 30rpx 12rpx;
		margin-top: 32rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.info-title {
			padding-bottom: 16rpx;
			align-items: center;

			.title {
				flex: 1;
				margin-left: 12rpx;
			}
		}

		.pay-l {
			padding: 4rpx 0;
			align-items: center;

			.person {
				margin-left: 10rpx;
			}
		}
	}

	.pro-attribute {
		// flex-wrap: wrap;
		width: 103%;
		position: relative;
	}

	.attri-item {
		position: relative;
		width: 192rpx;
		margin-top: 32rpx;
		margin-right: 24rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.attri-info {
			width: 84rpx;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			background-color: #E3EAFF;
			color: #1C5AD2;
			font-size: 24rpx;
			border-top-left-radius: 10rpx;
		}

		.title {
			padding: 16rpx;
		}

		.attri-item:nth-child(3n) {
			margin-right: 0;
		}
	}

	.pro-add {
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 0;

		.add-view {
			width: 35%;
			align-items: center;
			font-size: 30rpx;
			flex: 1;
		}
	}

	.pro-add /deep/ .u-button {
		width: 112rpx;
		height: 44rpx;
		background-color: inherit;
	}

	.pro-add /deep/ .u-button__text {
		font-size: 24rpx !important;
	}

	.pro-add /deep/ .u-icon__icon {
		font-size: 26rpx !important;
	}

	.c-item {
		width: 100%;
		padding: 24rpx 0;
		background-color: #fff;
		border-radius: 10rpx;

		.item-info {
			padding: 16rpx 28rpx;

			.item-sel {
				align-items: center;

				.title {
					flex: 1;
					padding-right: 30rpx;
					padding-left: 6rpx;
					font-size: 28rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.isActive {
					color: #b4b7bb;
				}
			}

			.c-info {
				margin-left: 48rpx;
				font-size: 26rpx;

				.dec {
					margin: 12rpx 0;
					color: #b4b7bb;
				}

				.nature {
					font-size: 24rpx;
					color: #b4b7bb;
				}
				
				.isActive {
					color: #b4b7bb;
				}
			}
		}
	}

	.divide-line {
		padding: 10rpx 0;
	}

	.c-process /deep/ .u-modal {
		text-align: center;
	}

	.add-party {
		width: 28px;
		font-size: 26rpx;
		color: #e1e1e1;
		margin-top: 32rpx;
		margin-right: 24rpx;
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		border: dashed 1px #e1e1e1;
		display: flex;
		align-items: center;
		padding: 5px;
		justify-content: center;
		background-color: #fff;
	}

	.scroll-list {
		@include flex(column);
	}
</style>